* {
  padding: 0;
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
body {
  background: #000d4a url(../imgs/bg.jpeg) center top;
}
header {
  width: 100%;
  height: 1.05rem /* 105/100 */;
  background: url(../imgs/head_bg.png) no-repeat center center;
  position: relative;
  color: #fff;
  h1 {
    text-align: center;
    font-size: 0.42rem /* 42/100 */;
    padding-top: 0.2rem;
  }
  span {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    font-size: 0.42rem /* 42/100 */;
  }
}
.main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0.2rem;
  .column {
    width: 25%;
    height: 100%;
    // background: red;
    position: relative;
    // 左1图
    .left1 {
      width: 100%;
      height: 100%;
    }
    // 左3图
    .left3 {
      width: 100%;
      height: 2rem;
    }
    // 中2图
    .box-m2 {
      width: 100%;
      height: 3.3rem;
    }
    // 中3图
    .box-m3 {
      width: 100%;
      height: 3.2rem;
    }
    // 右3图
    .box-f3 {
      width: 100%;
      height: 2.6rem;
    }
    &:nth-of-type(2) {
      width: 50%;
      // background: green;
      margin: 0 0.2rem;
      //main1
      .main1 {
        div {
          display: flex;
          color: #fff;
          margin-left: 0.15rem;
          p {
            color: #fff;
            letter-spacing: 0;
            border: none;
            font-size: 0.36rem;
            margin: 0.15rem 2rem 0.2rem 0;
            span {
              font-size: 0.28rem;
            }
          }
          span {
            font-size: 0.24rem;
            margin: 0.2rem 0.2rem;
          }
        }
        p {
          width: 4rem;
          font-size: 0.88rem;
          color: yellow;
          font-weight: 900;
          margin-left: 0.15rem;
          border-top: 0.01rem #ccc solid;
          border-bottom: 0.01rem #ccc solid;
          letter-spacing: 0.1rem;
        }
      }
    }
    .box {
      width: 100%;
      height: 2.3rem;
      margin-bottom: 0.15rem;
      background: rgba(0, 0, 0, 0.2);
      overflow: hidden;
      padding: 0.15rem 0;
      // 公共标题和导航栏
      .title {
        color: #fff;
        display: flex;
        margin: 0 0 0.1rem 0.15rem;
        div {
          width: 0.05rem;
          height: 0.2rem /* 20/100 */;
          background: #49bcf7;
          margin-right: 0.15rem;
          text-align: center;
        }
      }
      .menu {
        color: #ccc;
        display: flex;
        justify-content: space-between;
        padding-bottom: 0.1rem;
        margin: 0 0 0.1rem 0.15rem;
        border-bottom: 0.01rem #ccc solid;
        span:nth-of-type(4) {
          margin-right: 1rem;
        }
      }
      //左2
      &:nth-of-type(2) {
        .list {
          height: 1.6rem;
          ul {
            height: 5.8rem;
            color: #ccc;
            margin: 0 0 0.1rem 0.15rem;
            list-style: none;
            li {
              display: flex;
              margin: 0.15rem 0;
              justify-content: space-between;
              span:nth-of-type(1) {
                background: none;
              }
            }
          }
        }
      }
    }
    //右1-2
    ul {
      height: 5.8rem;
      color: #ccc;
      margin: 0 0 0.1rem 0.15rem;
      list-style: none;
      li {
        display: flex;
        margin: 0.15rem 0;
        justify-content: space-between;
        span:nth-of-type(1) {
          background: red;
          width: 0.2rem;
          height: 0.3rem;
          text-align: center;
        }
      }
    }
    // 中1
    .m1-1 {
      width: 1rem;
      height: 1rem;
      position: absolute;
      top: 1.2rem;
      right: 2.7rem;
    }
    .m1-2 {
      width: 1rem;
      height: 1rem;
      position: absolute;
      top: 1.2rem;
      right: 1.5rem;
    }
    .m1-3 {
      width: 1rem;
      height: 1rem;
      position: absolute;
      top: 1.2rem;
      right: 0.3rem;
    }
  }
}
